<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="js/jquery-3.1.1.js" ></script>
		<style type="text/css">
			
	    .content {
	    	position: absolute;
	    	    top: 100px;
	    	    width: 125px;
    			height: 42px;
    			
	    }
	  p{
	  	display:none;
	  	margin: 50px;
	  	width: 50px;
	  }
	  #txt ul li{
	  	float: left;
	  	list-style: none;
	  	margin-left: 30px;     
	  	cursor: pointer;
	  }
	  .red{
	  	background: red;
	  }
		</style>
	</head>
	<body>
		<div id="txt">
			<ul>
				<li>1</li>
				<li>2</li>
				<li>3</li>
			</ul>
			
		</div>
		
		<div class="content">
			<p style="display: block;">数字!</p>
			<p >1!</p>
			<p>2!</p>
			<p>3!</p>
			
		</div>
		<div>
			<img src="images/ren.png" id="avatar" alt="my avatar" title="fff">
		</div>
		<div>
			<input type="text" autocomplete="on" placeholder="请输入文字"  id="sss"/>
		</div>
		<script>
   $("#txt ul li").hover(function(){
   	$(this).addClass("red").siblings().removeClass("red");
   	var ind = $(this).index();
   	$(".content p").eq(ind+1).show().siblings().hide();
   	 var tx = $(".content p").eq(ind+1).show().text();
   	document.getElementById("sss").value = tx;
   })
 
			
//			////////////////////////////////////////////////////////////////////////
//			function convertToGS(img){
//				//储存原色彩版
//				img.color = img.src;
//				//创建灰度版
//				img.grayscale = createGSCanvas(img);
//				//在mouseover/out事件发生时切换图片
//				img.onmouseover = function(){
//					this.src = this.color;
//				}
//				img.onmouseout() = function(){
//					this.src = this.grayscale;
//				}
//				img.onmouseout();
//			}
//			function createGSCanvas(img){
//				var canvas = document.createElement("canvas");
//				canvas.width = img.width;
//				canvas.height = img.height;
//				
//				var ctx = canvas.getContext("2d");
//				ctx.drawImage(img,0,0);
//				//注意,getImageData 只能操作与脚本位于同一个域中的图片;
//				var c = ctx.getImageData(0,0,img.width,img.height);
//				for(i=0;i<c.height;i++){
//					for(j=0;c.width;j++)
//					{
//						var x = (i*4) * c.height +(j*4);
//						var r = c.data[x];
//						var g = c.data[x+1];
//						var b = c.data[x+2];
//						c.data[x] = c.data[x+1] = c.data[x+2] = (r+g+b)/3;
//						
//					}
//				}
//				ctx.putImageData(c,0,0,0,0,c.width,c.height);
//				return canvas.toDataURL();
//			}
//			window.onload = function(){
//				convertToGS(document.getElementById('avatar'));
//				
//			}
//			
			
			
			
			
//			window.onload = function(){
//		  var txt = document.getElementById("txt");
//		  var p1 = document.createElement("p");
//		  txt.appendChild(p1);
//		  var txtp = document.createTextNode("hello world!!");
//		  p1.appendChild(txtp);
//		    //txt.appendChild(p2);
//		    //在p2未创建的时候不能将p2内容添加到"id=txt"的div里就算底下已经创建好了 浏览器读取代码从上而下
//		  var p2 = document.createElement("p");//用createElement 创建 "p" 元素节点 p2
//		  var txt1 = document.createTextNode("this is");// 用createTextNode 创建 "this is" 文本节点 txt1
//		  p2.appendChild(txt1);  //用appendChild将 txt1的内容添加给 p2
//		  var emphasis = document.createElement("em");//创建元素节点 em
//		  var txt2 = document.createTextNode("my"); //创建 文本节点 my
//		  emphasis.appendChild(txt2);//将文本my添加到元素节点"em"中
//		  p2.appendChild(emphasis);//将em与内容加到元素节点p2中
//		  var txt3 = document.createTextNode("test!!");//创建 tset 文本节点
//		  p2.appendChild(txt3);//将txt3加入p2
//		  txt.appendChild(p2);//将p2加到txtdiv
//			}
			
		</script>
	</body>
</html>
